<template>
  <div class="my-userList">
    <!--<form action="/">-->
      <!--<van-search-->
        <!--v-model="value"-->
        <!--show-action-->
        <!--placeholder="请输入搜索关键词"-->
        <!--@search="onSearch"-->
        <!--@cancel="onCancel"-->
      <!--/>-->
    <!--</form>-->
    <van-list  @load="onLoad">
      <div class="van-clearfix">
        <ul>
          <li v-for="(item, index) in userList" :key="index">
            <van-swipe-cell>
              <van-cell
                :border="false"
                :title="`${item.name}`"
                is-link
                :to="item.path"
              />
              <template #right>
                <van-button square type="danger" text="删除" @click="delUser(item)" />
                <van-button square type="info" text="编辑" @click="modifyUser(item)" />
              </template>
            </van-swipe-cell>
          </li>
        </ul>
        <van-button type="warning" size="large"  @click="logout">退出登录
        </van-button>
        <div class="van-list__placeholder"></div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { queryPageUsers, delUser } from "@/api/userInfo";
import { Dialog, Toast } from "vant";
import { routes } from '@/router'
import UserDetailUpdate from "@views/userInfo/UserDetailUpdate.vue";
import oauthLoginUtil from '@/utils/oauthLoginUtil'
export default {
  name: "userList",
  data() {
    return {
      value: '',
      userList: [],
      loading: false,
      finished: false,
      pageTotal: 0,
      userSearch:{
        page: 1,
        pageSize: 20,
        filters: null,
        sorts: null
      },
      routes : [
        {
          path: "/userInfo/UserDetailUpdate",
          name: "查看个人信息",
          component: UserDetailUpdate,
          meta: {
            requireAuth: true
          }
        },
        {
          path: "/userInfo/UserDetailUpdate",
          name: "修改密码",
          component: UserDetailUpdate,
          meta: {
            requireAuth: true
          }
        },

      ]
    };
  },
  methods: {
    onLoad() {
      this.userList = this.routes;
    },
    logout() {
      oauthLoginUtil.logout()
      this.$store.dispatch('FedLogOut').then(() => {
        this.$router.replace('/login')
      })
    },
    // 删除用户信息
    delUser(item) {
      Dialog.confirm({
        title: "删除",
        message: `是否确认删除用户${item.nickname}`
      }).then(() => {
        delUser([item.id]).then(data => {
          Toast.success("删除成功");
          // 可以通过watch userList来动态更新?
          this.getUserList();
        });
      });
    },
    modifyUser(item) {
      this.$router.push({
        name: "UserModify",
        params: { id: item.id }
      });
    },
    onSearch(val) {
      this.userSearch.page = 1
      this.userList = []
      this.userSearch.filters = {}
      this.userSearch.filters['loginName'] = val
      this.onLoad();
    },
    onCancel() {
      this.userSearch.page = 1
      this.userList = []
      this.userSearch.filters = null
      this.onLoad();
    },
  }
};
</script>
